import React, { useEffect, useState } from 'react';
import '@/views/Index/ImageText/ImageText.scss'
<<<<<<< HEAD
import { Select, Space, DatePicker, Input, Button, Tabs, Table, message, Form, } from 'antd';
=======
import { Select, Space, DatePicker, Input, Button, Tabs, Table, message, Form, Breadcrumb, } from 'antd';
>>>>>>> 53652b1c18f6a264a7ec9e1a3fab9b414c0a71f8
import type { ColumnsType } from 'antd/es/table';
import "./Good.scss"
import type { TabsProps } from 'antd';

import service from '../../../api'
import { useNavigate } from 'react-router-dom';
<<<<<<< HEAD
import { useDispatch } from 'react-redux'

=======
>>>>>>> 53652b1c18f6a264a7ec9e1a3fab9b414c0a71f8



interface Props {

}
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    img: string;
    id: string
    dataIndex: string
}

function Good(props: Props) {
    const { RangePicker } = DatePicker;
    const [form] = Form.useForm();
<<<<<<< HEAD
    const dispatch = useDispatch()//redux

=======
>>>>>>> 53652b1c18f6a264a7ec9e1a3fab9b414c0a71f8

    var navigate = useNavigate()
    var [tableData, setTableData] = useState<DataType[]>([])
    //商品状态
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };
    // 发送获取商品列表数据 请求
    var good_list = async () => {
        var res = await service.shuju.good_list()
        // res.data.data.map((item: any) => {
        //     item.key = item.id
        // })
        // console.log(res.data.data);
        // setTableData(res.data.data);
        res.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res.data);
    }
    useEffect(() => {
        good_list();
    }, [])

    //新增
    const add = () => {
        navigate('/index/goodadd');
    }
    //编辑
    const edit = (record: any) => {
<<<<<<< HEAD
        navigate('/index/goodedit');
        console.log(record.id)
        dispatch({ type: 'SAVE_GOODID', payload: record.id })
=======
        navigate('/index/goodedit/' + record.id);
>>>>>>> 53652b1c18f6a264a7ec9e1a3fab9b414c0a71f8
    }
    //删除
    const del = async (record: any) => {
        var res1 = await service.shuju.good_del({ id: record.id, })
        console.log(res1);
        message.open({
            type: 'success',
            content: '删除成功',
        });
        good_list()
    }
    //表单查询
    const onFinish = async (values: any) => {
        console.log(values);
        var res5 = await service.shuju.good_search({ ...values })
        // res5.data.data?.map((item: any) => {
        //     item.key = item.id
        // })
        // setTableData(res5.data.data)
        res5.data.map((item: any) => {
            item.key = item.id
        })
        setTableData(res5.data)
        good_list()
    };
    //表单重置
    const onReset = () => {
        form.resetFields();
    };
    //下架
    const xiajia = async (record: any) => {
        var res2 = await service.shuju.good_del({ id: record.id, })
        console.log(res2);
        message.open({
            type: 'success',
            content: '下架成功',
        });
        good_list()
    }
    //高亮
    const items: TabsProps['items'] = [
        {
            key: '1',
            label: `今日`,

        },
        {
            key: '2',
            label: `昨日`,

        },
        {
            key: '3',
            label: `最近7天`,

        },
        {
            key: '4',
            label: `最近30天`,

        },
    ];

    //表格
    const columns: ColumnsType<DataType> = [
        {

            title: '商品信息',
            dataIndex: 'img',
            render: (_, record) => {
                return <div className='tuwen'>
                    <img src={record.img} alt="" />
                    <a href="#">{record.name}</a>
                </div>
            }
        },
        {
            title: '商品价格(元)',
            dataIndex: 'money',

        },
        {
            title: '销售量',
            dataIndex: 'xiaoshou',

        },
        {
            title: '商品状态',
            dataIndex: 'state',

        },
        {
            title: '上架时间',
            dataIndex: 'time',

        },
        {
            title: '排序号',
            dataIndex: 'hao',

        },
        {
            title: '操作',
            render: (_, record) => {
                return <>
                    <a className='edit option_btn' onClick={() => { edit(record) }}>
                        编辑
                    </a>
                    <a className='off option_btn' onClick={() => { xiajia(record) }}>
                        下架
                    </a>
                    <a className='delete option_btn' onClick={() => { del(record) }}>
                        删除
                    </a>
                </>
            }
        },
    ];
    //复选框事件
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            id: record.dataIndex,
        }),
    };

    return (
        <div className='good'>
            <div className="top">
                <p>课程管理 / 图文课程</p>
                <h2>商品管理</h2>
            </div>
            <div className="xia">
                <Form
                    className='forms'
                    form={form}
                    name="control-hooks"
                    onFinish={onFinish}
                >
                    <Form.Item name="state" label="商品状态">
                        <Select
                            style={{ width: 300, marginRight: 30 }}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '待上架', label: '待上架' },
                                { value: '已上架', label: '已上架' },
                                { value: '已下架', label: '已下架' },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item name="name" label="商品名称">
                        <Input style={{ width: 300, marginLeft: 40 }} placeholder="请输入" />

                    </Form.Item>
                    <Form.Item
                        name="time"
                        label="上架时间">
                        <DatePicker />
                    </Form.Item>
                    <Tabs items={items} />
                    <Form.Item>
                        <Button type="primary" htmlType="submit" style={{ marginRight: 30 }}>
                            查询
                        </Button>
                        <Button htmlType="button" onClick={onReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>


            </div>
            <div className="biaoge">
                <div className="shang">
                    <h2>商品列表</h2>
                    <Space >
                        <Button type="primary" onClick={add}>+新建</Button>
                        <Button className='btn2' type="primary">批量操作</Button>
                    </Space>
                </div>

                <div className="table">
                    <Table
                        rowSelection={{
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={tableData}
                    />
                </div>
            </div>
        </div>
    );
}

export default Good;